<template>
    <div>
        <!-- 自定义组件 如果想使用双向数据绑定 实现两步  value 属性绑定和input 事件  :value  @input  -->
        <!--  v-bind="$attrs" 可以展开attrs 相当于每一项属性都设置上了-->
     <input :type="type" :value="value" @input="onInput" v-bind="$attrs">
    </div>
</template>

<script>
export default {
  inheritAttrs: false, //设置false 避免attrs 默认也设置到根元素上
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    }
  },
  data() {
    return {};
  },
  created() {
    console.log(this.value, this.type);
  },
  methods: {
    onInput(e) {
      // 一般来说 value 数据是单项数据流 也就是监听到数据变化之后不要直接修改，要直接抛出一个事件让他去修改
      // 因此在onInput 中只需要取派发一个事件就可以了 这样便形成了单项数据流
      this.$emit("input", e.target.value);

      // 通知父亲级别通知校验
      this.$parent.$emit("validate"); // 虽然有耦合问题
    }
  }
};
</script>

<style lang="scss" scoped>
</style>